<div id="pm_settings">
    <div class="settings">
        <div class="row pm_grid" id="settingsAppearance">
            <section class="setting pm_form col-1-2">
                <header-block class="settingsAppearance-header-composer">
                    <h2
                        class="settingsAppearance-title-composer"
                        translate
                        translate-context="Title">Composer</h2>
                </header-block>

                <p class="alert alert-info"><span id="saveComposerModeDescAria" translate-context="Info" translate>This sets the default composer size. Two sizes are available, a smaller popup composer, and a bigger full screen composer.</span> <a href="https://protonmail.com/support/knowledge-base/composer/" target="_blank" translate-context="Action" translate-comment="learn more link" translate>Learn more</a></p>
                <div class="radio col-1-2 multi-line-label">
                    <label class="visual-label">
                        <custom-radio data-custom-ng-model="appearance.ComposerMode" data-custom-ng-value="0" data-custom-ng-change="saveComposerMode(composerMode)" data-custom-aria-describedby="saveComposerModeDescAria"></custom-radio>
                        <span  translate translate-context="Action" translate-comment="form option">Popup</span>
                        <span class="visual-label-lineBreak"></span>
                        <img src="assets/img/settings/pop.gif"  alt="" />
                    </label>
                </div>
                <div class="radio col-1-2 multi-line-label">
                    <label class="visual-label">
                        <custom-radio data-custom-ng-model="appearance.ComposerMode" data-custom-ng-value="1" data-custom-ng-change="saveComposerMode(composerMode)" data-custom-aria-describedby="saveComposerModeDescAria"></custom-radio>
                        <span
                            translate
                            translate-context="Info"
                            translate-comment="form option">Maximized</span>
                        <span class="visual-label-lineBreak"></span>
                        <img src="assets/img/settings/max.gif" alt="" />
                    </label>
                </div>
            </section>

            <section class="setting pm_form col-1-2">
                <header-block class="settingsAppearance-header-layout">
                    <h2
                        class="settingsAppearance-title-layout"
                        translate
                        translate-context="Title">Layout</h2>
                </header-block>

                <p class="alert alert-info"><span id="saveLayoutModeDescAria" translate-context="Info" translate>ProtonMail supports both column and row layouts for the inbox. Using this setting, it is possible to change between the two layouts.</span> <a href="https://protonmail.com/support/knowledge-base/change-inbox-layout" target="_blank"  translate translate-context="Action">Learn more</a></p>
                <div class="radio col-1-2 multi-line-label">
                    <label class="visual-label">
                        <custom-radio data-custom-ng-model="appearance.ViewLayout" data-custom-ng-value="0" data-custom-ng-change="saveLayoutMode(composerMode)" data-custom-aria-describedby="saveLayoutModeDescAria"></custom-radio>
                        <span
                            translate
                            translate-context="Info"
                            translate-comment="form option">Column</span>
                        <span class="visual-label-lineBreak"></span>
                        <img src="/assets/img/settings/col.gif" alt="" />
                    </label>
                </div>
                <div class="radio col-1-2 multi-line-label">
                    <label class="visual-label">
                        <custom-radio data-custom-ng-model="appearance.ViewLayout" data-custom-ng-value="1" data-custom-ng-change="saveLayoutMode(composerMode)" data-custom-aria-describedby="saveLayoutModeDescAria"></custom-radio>
                        <span
                            translate
                            translate-context="Info"
                            translate-comment="form option">Row</span>
                        <span class="visual-label-lineBreak"></span>
                        <img src="/assets/img/settings/row.gif" alt="" />
                    </label>
                </div>
            </section>

        </div>
        <div class="row pm_grid">
            <section class="setting pm_form col-1-2">
                <header-block class="settingsAppearance-header-toolbar">
                    <h2
                        class="settingsAppearance-title-toolbar"
                        translate
                        translate-context="Title">Toolbar</h2>
                </header-block>

                <p class="alert alert-info" id="saveButtonsPositionDescAria" translate-context="Info" translate>Choose your preferred button order for marking messages as read / unread.</p>
                <div class="toolbar-button-options">
                    <label>
                        <custom-radio data-custom-ng-change="saveButtonsPosition()" data-custom-ng-model="appearance.MessageButtons" data-custom-ng-value="0" data-custom-aria-describedby="saveButtonsPositionDescAria"></custom-radio>
                        <span class="pm_buttons pull-left" pt-tooltip-translate="Mark as read - Mark as unread"  pt-tooltip-translate-context="Action">
                            <span class="sr-only" translate translate-context="Action">Mark as read - Mark as unread</span>
                            <a href="#" class="dead" role="presentation" tabindex="-1"><i class="fa fa fa-eye"></i></a>
                            <a href="#" class="dead" role="presentation" tabindex="-1"><i class="fa fa fa-eye-slash"></i></a>
                        </span>
                    </label>
                    <label>
                        <custom-radio data-custom-ng-change="saveButtonsPosition()" data-custom-ng-model="appearance.MessageButtons" data-custom-ng-value="1" data-custom-aria-describedby="saveButtonsPositionDescAria"></custom-radio>
                        <span class="pm_buttons pull-left" pt-tooltip-translate="Mark as unread - Mark as read"  pt-tooltip-translate-context="Action">
                            <span class="sr-only" translate translate-context="Action">Mark as unread - Mark as read</span>
                            <a href="#" class="dead" role="presentation" tabindex="-1"><i class="fa fa fa-eye-slash"></i></a>
                            <a href="#" class="dead" role="presentation" tabindex="-1"><i class="fa fa fa-eye"></i></a>
                        </span>
                    </label>
                </div>
            </section>

            <section class="setting pm_form col-1-2">
                <header-block class="settingsAppearance-header-conversation">
                    <h2
                        class="settingsAppearance-title-conversation"
                        translate
                        translate-context="Title">Conversation Grouping</h2>
                </header-block>

                <p class="alert alert-info" translate-context="Info" translate>Conversation Grouping automatically groups messages in the same conversation together.</p>
                <div class="pm_grid">
                    <div class="col-1-2">
                        <label for="changeViewMode" translate-context="Label" translate>Use conversation grouping</label>
                    </div>
                    <div class="col-1-2">
                        <toggle status="appearance.viewMode" name="changeViewMode" data-id="changeViewMode"></toggle>
                    </div>
                </div>
                <div class="pm_grid" ng-show="appearance.viewMode">
                    <div class="col-1-2">
                        <label for="changeStickyLabels">
                            <span translate-context="Label" translate>Use sticky labels</span>
                            <i class="fa fa-info-circle"
                                pt-tooltip-translate="When a label is added to a message in a conversation, all future messages you send or receive will have that same label automatically applied."
                                pt-tooltip-translate-context="Tooltip"></i>
                        </label>
                    </div>
                    <div class="col-1-2">
                        <toggle status="appearance.stickyLabels" name="changeStickyLabels" data-id="changeStickyLabels"></toggle>
                    </div>
                </div>
            </section>
        </div>
        <div class="row pm_grid">
            <section class="setting pm_form col-1-2">

                <form method="post" novalidate ng-submit="themeForm.$valid && saveTheme(themeForm)" name="themeForm" class="bottomRow">
                    <header-block class="settingsAppearance-header-theme">
                        <h2
                            class="settingsAppearance-title-theme"
                            translate
                            translate-context="Title">Custom theme</h2>
                    </header-block>

                    <div class="margin" ng-class="{'has-error': (themeForm.cssTheme.$touched || themeForm.$submitted) && themeForm.cssTheme.$error.required}">
                        <p class="alert alert-info" id="cssThemeDescAria" translate-context="Info" translate>Custom themes from third-parties can potentially betray your privacy. Only use themes from trusted sources.</p>
                        <label for="cssTheme" class="sr-only" translate-context="Label" translate>Custom theme</label>
                        <textarea
                            class="code"
                            placeholder-translate="Paste your CSS code here (limited to 200,000 characters)"
                            placeholder-translate-context="Dashboard, custom theme input"
                            id="cssTheme"
                            name="cssTheme"
                            ng-model="appearance.cssTheme"
                            maxlength="200000"
                            aria-describedby="cssThemeDescAria"></textarea>
                    </div>
                    <div class="text-right">
                        <button type="button" class="pm_button" ng-click="clearTheme()" translate-context="Action" translate>Reset theme</button>
                        <button type="submit" class="pm_button primary" translate-context="Action" translate>Save</button>
                    </div>
                </form>
            </section>
            <section class="setting pm_form col-1-2">

                <header-block class="settingsAppearance-header-addtheme">
                    <h2
                        class="settingsAppearance-title-addtheme"
                        translate
                        translate-comment="legend / form heading for adding custom CSS theme code"
                        translate-context="Title">Additional themes</h2>
                </header-block>

                <p class="alert alert-warning">
                    <i class="fa fa-exclamation-triangle"></i> <span translate-context="Info" translate>Loading themes will override your current theme!</span>
                </p>
                <p>
                    <button class="pm_button" ng-click="loadThemeClassic()" translate-context="Action" translate>Load classic theme</button>
                    <button ng-if="false" class="pm_button" ng-click="enableThemeEdison()" translate-context="Action" translate>Load edison theme</button>
                </p>
            </section>
        </div>
        <div class="row pm_grid">
            <section class="pm_form col-1-2">
                <header-block class="settingsAppearance-header-moved">
                    <h2
                    class="settingsAppearance-title-moved"
                    translate
                    translate-comment="Section heading"
                    translate-context="Title">Sent / Drafts folders appearance</h2>
                </header-block>
                <p class="alert alert-info" translate-context="Bubbule info in appearance sent and drafts folders" translate>Setting to 'Include Moved' means that sent / drafts messages that have been moved to other folders will continue to appear in the Sent/Drafts folder.</p>
                <moved-select></moved-select>
                <a href="https://protonmail.com/support/knowledge-base/include-moved-messages" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
            </section>
            <section class="setting pm_form col-1-2">

                <header-block class="settingsAppearance-header-addtheme">
                    <h2
                        class="settingsAppearance-title-addtheme"
                        translate
                        translate-comment="Choose the default composer mode"
                        translate-context="Title">Composer mode</h2>
                </header-block>
                <p>
                    <choose-composer-mode></choose-composer-mode>
                </p>
            </section>
        </div>
        <div class="row pm_grid">
            <section class="pm_form col-1-2">
                <header-block class="settingsAppearance-header-textDirection">
                    <h2
                        class="settingsAppearance-title-textDirection"
                        translate
                        translate-comment="Section heading"
                        translate-context="Title">Composer Text Direction</h2>
                </header-block>
                <choose-right-to-left></choose-right-to-left>
            </section>
        </div>
    </div>
</div>
